<template>
  <div class="home">
    <title-bar title="form" />
    <div class="row">屏幕宽高={{ screenPx[0] }}x{{ screenPx[1] }}</div>
    <div class="row">可用宽高={{ availPx[0] }}x{{ availPx[1] }}</div>
    <div class="row">body宽高={{ bodyClientPx[0] }}x{{ bodyClientPx[1] }}</div>
  </div>
</template>
<script>
import TitleBar from "@/components/title-bar";
export default {
  computed: {
    screenPx() {
      return [window.screen.width, window.screen.height];
    },
    availPx() {
      return [window.screen.availWidth, window.screen.availHeight];
    },
    bodyClientPx() {
      return [document.body.clientWidth, document.body.clientHeight];
    },
  },
  components: {
    TitleBar,
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.home {
  width: 100vw;
  height: 100vh;
  .row {
    text-align: center;
    padding: 10px;
  }
}
</style>